当单击任意柱状图中任意柱形时,您可以通过MouseDown以及MouseLeave事件添加动画,如下XAML标记代码所示:
XAML |
拷贝代码
|
---|---|
<Window x:Class="MouseEvent.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" Title="Window1" Height="300" Width="300" xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart" Loaded="Window_Loaded"> <Grid> <Grid.Resources> <Style x:Key="sstyle" TargetType="{x:Type c1chart:PlotElement}"> <Setter Property="StrokeThickness" Value="1" /> <Setter Property="Canvas.ZIndex" Value="0" /> <Style.Triggers> <EventTrigger RoutedEvent="c1chart:PlotElement.MouseDown"> <BeginStoryboard> <Storyboard> <Int32Animation Storyboard.TargetProperty="(Panel.ZIndex)" To="1" /> <DoubleAnimation Storyboard.TargetProperty="StrokeThickness" To="4" Duration="0:0:0.3" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="c1chart:PlotElement.MouseLeave"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="StrokeThickness" /> <Int32Animation Storyboard.TargetProperty="(Panel.ZIndex)" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </Grid.Resources> <c1chart:C1Chart Margin="0" Name="c1Chart1" ChartType="Column"> <c1chart:C1Chart.Data> <c1chart:ChartData> <c1chart:ChartData.ItemNames>P1 P2 P3 P4 P5</c1chart:ChartData.ItemNames> <c1chart:DataSeries SymbolStyle="{StaticResource sstyle}" Values="20 22 19 24 25" /> <c1chart:DataSeries SymbolStyle="{StaticResource sstyle}" Values="8 12 10 12 15" /> </c1chart:ChartData> </c1chart:C1Chart.Data> </c1chart:C1Chart> </Grid> </Window> |
该主题演示以下内容:
单击任意柱形,可以注意到矩形框周围的动画效果: